<template>
  <div id="treeSvg">
    <!-- <svg class="svg vue-tree" ref="svgRef" :style="getInitialTransformStyle()"></svg>
    <div class="dom-container"></div> -->
  </div>
</template>
<script setup>
/* eslint-disable */
import { onMounted,ref} from "vue";
import * as d3 from "d3";

import { treeMockData } from "./treeMockData";

const data = treeMockData


 

   //点击某个节点
  const  clickNode=(d)=> {
 console.warn('d.data_children',d.data_children);
        if (!d.data._children && !d.data.children) {//无子节点
          return;
        }
        if(d.data.children){
          d.data._children = d.data.children;
          d.data.children = null
        }
        else{
          d.data.children = d.data._children;
          d.data._children = null
        }
        console.warn(2222,d);
        d3.select("#treeSvg").selectAll("svg").remove();
        initTree();
      }
function createMark(svg){
  var marker =
            svg.append("marker")
                .attr("id", "resolved")
                .attr("markerUnits", "strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
                .attr("markerUnits", "userSpaceOnUse")
                .attr("viewBox", "0 -5 10 10")//坐标系的区域
                .attr("refX", 10)//箭头坐标
                .attr("refY", 0)
                .attr("markerWidth", 12)//标识的大小
                .attr("markerHeight", 12)
                .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
                .attr("stroke-width", 2)//箭头宽度
                .append("path")
                .attr("d", "M0,-5L10,0L0,5")//箭头的路径
                .attr('fill', '#409eff');//箭头颜色

return marker

}
function   drawCircle(node) {
        let gMark = node.append('g')
        .style('display',d=>{
          if ( !d.data._children) {
						return "none";
					}
        })
          .attr('class', 'node-circle')
          .attr('transform','translate(' + 45+ ',' + 57+ ')')
          

        gMark.append("circle")
          .attr('fill', 'none')
          .attr("r", d => d.depth === 0 ? 0 : 7)//根节点不设置圆圈
          .attr('fill', '#409eff');
        let padding = 3;
        gMark.append('path').attr('d', `m -${padding} 0 l ${2 * padding} 0`)
        .attr('stroke','#fff');//横线

        gMark.append('path')//竖线，根据展开/收缩动态控制显示
          .attr('d', `m 0 -${padding} l 0 ${2 * padding}`)
          .attr('stroke-width',1 )
          .attr('stroke','#fff')
          .attr('class', 'node-circle-vertical');
        return gMark
  }

  function createNodeDiv(d){
    const {name,GDP=''} = d.data;
    const str = `<div class="org-content-wrap ">
      <div class="title">${name}</div>
      <div class="des">${GDP}</div>
      </div>`

      return str
  }


function initTree(){
  const treeMap = d3.tree().size([1000,500])
  const svg = d3.select("#treeSvg").append("svg")
    .attr("width", 1000)
    .attr("height", 700)
    .append('g')
    .attr('transform','translate(0,40)')

    createMark(svg)
  const dataSet = d3.hierarchy(data)
  const nodes = treeMap(dataSet)
  console.warn(123,nodes,nodes.links());



const nodesDes = nodes.descendants()
            nodesDes.forEach(d => {
    d.y=140*d.depth
  });


  // node.append('circle')
  // .attr('r', 20)
  // .attr('fill', () => 'red')

  // node.append('text')
  // .attr("dy", ".33em")
  // .attr("font-size","12px")
  // .attr("text-anchor", "middle") // 文字居中
  // .attr('fill', '#fff')
  // .text( d=>{
  //   return d.data.name
  // } )


  // node.append("foreignObject")
	// 			 .attr("class", "foreign_add")
	// 			 .style("display", function (d) {
  //         console.warn("foreignObject",d);
	// 					if (!d.data.children  && !d.data._children) {
	// 						return "none";
	// 					}
	// 			  })
	// 			 .append("xhtml:div")
	// 			 .attr("class", function (d) {
	// 					if (!d.data._children) {
	// 						return "less_div";
	// 				    }
	// 				    return "add_div"
	// 			  }).on("click", function (d) {
	// 				    scope.click(svg, d, root, direction);
  //         })

          let links = nodes.links()


  const link = svg.selectAll('.link')
  .data(links);

  link.enter()
  .append('path')
  .attr('class', 'link')
  .attr('fill','none')
  .attr('stroke-width',1)
  .attr('stroke', '#409eff')
  .attr('d',d3.linkVertical() // linkVertical() 垂直  linkHorizontal() 水平
    .x(function(d) { return d.x+20; })
    .y(function(d) { return d.y; })
 
  )
  .attr("marker-end", "url(#resolved)")

  link.enter().append('g').attr('transform', function(d) {
    const x = d.target.x+10;
      const y =d.target.y -40;
      return 'translate(' + x+ ',' + y+ ')'
  }).append('text')
  .attr("dy", ".33em")
  .attr("font-size","12px")
            .attr('fill', '#409eff')
            .attr('writing-mode','tb')
            .text(function (d, i) {
                console.warn('d',d);
                return d.target.data.GDP
            });

            const node =  svg.selectAll('.node').data(nodesDes)
  .enter()
  .append('g')
  .attr('class', function(d) {
    return 'node' + (d.children ? ' node--internal' : ' node--leaf');
  })
  .attr('transform', function(d) {
    const x = d.x -25 ;
      const y =d.y ;
      return 'translate(' + x+ ',' + y+ ')'
  })
  .on("click", ($event,d) => {
    d.depth !== 0 && clickNode(d);//根节点不执行点击事件
 });

 node.append("foreignObject").attr('class',d=>{
  const className =d.depth===0?'first-org-oreign':''
  return `org-oreign ${className}`
 }).attr('width',100).attr('height',50)
 .append("xhtml:div").html(d=>{
  return createNodeDiv(d)
 })

 drawCircle(node)
 
  }
 

 
  onMounted(()=>{
    initTree()
  })

const initSvg = ()=>{

}



</script>



<style scss>
.dom-container{
  width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    transform-origin: 0 50%;
    z-index: 1;
    pointer-events: none;
}

.foreign_add{
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.org-oreign {
  font-size: 12px;
  background-color: #4ae;
  border-radius: 5px;
  padding:0 10px;
 
}

.first-org-oreign{
  position: relative;
  transform: translateY(-40px);
}

.org-oreign div{
    height: 25px;
    line-height:25px
  }

  .org-oreign .title{
    font-weight: bold;
  }
</style>
